<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
    <br><hr><br>
    <a v-bind:href="url">v-bind:href="url"</a>
    <!--省略写法-->
    <a :href="url">:href="url"</a>
    <input v-model="url">
    <br><hr><br>
    <input type="button" value="v-on:click" v-on:click="show()">
    <input type="button" value="@click" @click="show()">
    <br><hr><br>
    <div v-if="count == 1">div1-v-if="count == 1"</div>
    <div v-else-if="count == 2">div2-v-else-if="count == 2"</div>
    <div v-else>div3-v-else</div>
    <div v-show="count == 5">div5-v-show</div>
    <br>
    <input v-model="count">
    <br><hr><br>
    v-for="addr in addrs"
    <div v-for="(addr,i) in addrs">
        <!--i表示索引，从零开始-->
        {{i+1}}-{{addr}}
    </div>
</div>
<!--https://cdn.jsdelivr.net/npm/vue/dist/vue.js-->
<script src="./js/vue.js"></script>
<script>
    //创建vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"https://www.bilibili.com/",
                count:"",
                addrs:["北京","上海","南京","杭州","成都"]
            }
        },
        methods:{
            show(){
                alert("v-on:click=\"show()\"");
            }
        },
        mounted(){
            alert("Vue生命周期-mounted()加载完成")
        }
    });
</script>
</body>
</html>